.one .surface {
    position: absolute;
    top: calc(50% - 4em);
    left: calc(50% + 10em);
    width: 1em;
    height: 10em;
    background: #000;
}
.one .shape {
    animation: one 4s infinite ease-out;
}
@keyframes one {
    0%, 15% {
        opacity: 0;
    }
    15%, 25% {
        top: calc(50% - 2em);
        left: calc(50% - 2em);
        width: 4em;
        height: 4em;
        opacity: 1;
        transform: none;
        animation-timing-function: cubic-bezier(1, -1.92, .95, .90)
    }
    35%, 45% {
        top: calc(50% - 3em);
        width: 2em;
        height: 6em;
        opacity: 1;
        transform: translateX(8em);
        animation-timing-function: linear;
    }
    70%, 100% {
        top: calc(50% - 3em);
        width: 2em;
        height: 6em;
        opacity: 0;
        transform: translateX(8em) translateY(5em);
    }
}
